import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {
  deleteRelease, generateCode, getDownloadLink,
  getReleaseById,
  getTypes
} from "../../../../../../redux/actions/releaseDetail/tabInfo";
import {Button, Col, CustomInput, FormGroup, Input, Row} from "reactstrap";
import Select from "react-select";
import {SET_RELEASE_INFO_FIELD, SET_RELEASE_INFO_VALUE} from "../../../../../../redux/constants/releaseDetail/tabInfo";
import {setFieldData} from "../../../../../../redux/actions/helper";
import {Edit3, Trash} from "react-feather";
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from "reactstrap"

import {PrivateProjectProvider} from "../../../../../../providers/PrivateProjectProvider";
import DataAndTime from "./DataAndTime";
import {Facebook, Instagram, Itunes, Tiktok, Twitter, Vkontakte, Youtube, Spotify} from "../../icons";
import ReleaseForm from "../../../Form";
import TrackList from "./TrackList";
import Artists from "./Artists";

const TabInfo = props => {
  const {deleteRelease, owner, verifyId, params} = props
  const {data, reqParams, generateCode, setFieldData, getDownloadLink} = props
  const releaseId = props.releaseId
  const [modal, setModal] = useState(false)
  const [isArtists, setIsArtists] = useState(false)

  useEffect(() => {
    props.getReleaseById(releaseId, reqParams)
  }, [releaseId, reqParams, params.isEdited]);

  useEffect(() => {
    setFieldData(SET_RELEASE_INFO_VALUE, 'params', {...params, isEdited: false})
  }, []);

  function typeChange(e) {
    props.setFieldData(SET_RELEASE_INFO_FIELD, 'type', e)
  }

  const deleteReleaseById = () => {
    deleteRelease(releaseId)
  }

  return (
    <div className="tab-info-content flex-grow-1 d-flex flex-column justify-content-between">
      <Modal
        isOpen={modal}
        toggle={() => setModal(false)}
      >
        <ModalHeader toggle={() => setModal(false)}>
          Подтверждение действия
        </ModalHeader>
        <ModalBody>
          Вы действительно хотите удалить релиз?
        </ModalBody>
        <ModalFooter>
          <Button color="danger" onClick={deleteReleaseById}>
            Удалить
          </Button>
        </ModalFooter>
      </Modal>
      <Artists isArtists={isArtists} setIsArtists={setIsArtists} data={data}/>
      {
        params.isEdited ? <ReleaseForm isEdited={params.isEdited} releaseId={releaseId}/> :
          <div className="p-2">
            <div className="tab-info-content-items">
              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item flex-item-100">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Проект</span>
                    </Col>
                    <Col md={8}>
                      <Select
                        className={`release-detail-select input-dark-bg tab-info-select`}
                        maxMenuHeight={250}
                        classNamePrefix="dark_select"
                        value={{...data.project, value: data.project.id, label: data.project.name}}
                        isSearchable={false}
                        onChange={typeChange}
                        name='typesList'
                        isDisabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item flex-item-100">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Дата релиза</span>
                    </Col>
                    <Col md={8}>
                      <DataAndTime disabled={true} date={data.releases_date}/>
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item flex-item-100">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Название</span>
                    </Col>
                    <Col md={8}>
                      <input
                        value={data.name || ''}
                        className={`release-content-list-item tab-info-input-name tab-info-input`}
                        disabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item flex-item-100">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Дата предрелиза</span>
                    </Col>
                    <Col md={8}>
                      <DataAndTime disabled={true} date={data.prereleases_date}/>
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item flex-item-100">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Тип релиза</span>
                    </Col>
                    <Col md={8}>
                      <Select
                        className={`release-detail-select input-dark-bg tab-info-select`}
                        maxMenuHeight={250}
                        classNamePrefix="dark_select"
                        value={{...data.type, value: data.type.id, label: data.type.name}}
                        isSearchable={false}
                        onChange={typeChange}
                        name='typesList'
                        isDisabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Бюджет на промо</span>
                    </Col>
                    <Col md={8}>
                      <input
                        style={{maxWidth: '145px'}}
                        value={data.budget && data.budget.toLocaleString('ru') + ' руб.' || ''}
                        className={`release-content-list-item tab-info-input-name tab-info-input`}
                        disabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Делить выплаты</span>
                    </Col>
                    <Col md={8}>
                      <div className="d-flex justify-content-start flex-wrap mt-1">
                        <CustomInput
                          id={Math.random() * 1000}
                          type="switch"
                          className="mr-1 mb-2"
                          defaultChecked={data.divide}
                          name="primary"
                          disabled={true}
                        />
                        {
                          !!data.divide && <span onClick={() => setIsArtists(true)}
                                                 className="text-primary cursor-pointer">Список артистов</span>
                        }
                      </div>
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Год записи</span>
                    </Col>
                    <Col md={8}>
                      <div style={{maxWidth: '145px'}}>
                        <Select
                          className={`release-detail-select input-dark-bg tab-info-select`}
                          maxMenuHeight={250}
                          classNamePrefix="dark_select"
                          value={{value: data.entry_year, label: data.entry_year}}
                          isSearchable={false}
                          onChange={typeChange}
                          name='typesList'
                          isDisabled={true}
                        />
                      </div>
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Ссылка на релиз</span>
                    </Col>
                    <Col md={8}>
                      <input
                        value={data.release_link || ''}
                        className={`release-content-list-item tab-info-input-name tab-info-input`}
                        disabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Ссылка на промо</span>
                    </Col>
                    <Col md={8}>
                      <input
                        value={data.promo_link || ''}
                        className={`release-content-list-item tab-info-input-name tab-info-input`}
                        disabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
              </Row>


              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Обложка</span>
                    </Col>
                    <Col md={8}>
                      {
                        !!data.cover.id && <span onClick={()=>getDownloadLink(data.cover.id)}
                                              className="text-primary cursor-pointer">Скачать</span>
                      }
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Соцсети артиста</span>
                    </Col>
                    <Col md={8}>
                      {
                        data.artist_socials &&
                        <div className="d-flex justify-content-start flex-wrap">
                          {data.artist_socials.facebook &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.facebook}><Facebook/></a>
                          </div>}
                          {data.artist_socials.youtube &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.youtube}><Youtube/></a>
                          </div>}
                          {data.artist_socials.twitter &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.twitter}><Twitter/></a>
                          </div>}
                          {data.artist_socials.vkontakte &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.vkontakte}><Vkontakte/></a>
                          </div>}
                          {data.artist_socials.instagram &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.instagram}><Instagram/></a>
                          </div>}
                          {data.artist_socials.tiktok &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_socials.tiktok}><Tiktok/></a></div>}
                        </div>
                      }
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Жанр</span>
                    </Col>
                    <Col md={8}>
                      <Select
                        className={`release-detail-select input-dark-bg tab-info-select`}
                        maxMenuHeight={250}
                        classNamePrefix="dark_select"
                        value={{...data.genre, value: data.genre.id, label: data.genre.name}}
                        isSearchable={false}
                        onChange={typeChange}
                        name='typesList'
                        isDisabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Магазины</span>
                    </Col>
                    <Col md={8}>
                      {
                        data.artist_shops && <div className="d-flex justify-content-start flex-wrap">
                          {data.artist_shops.spotify &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_shops.spotify}><Spotify/></a></div>}
                          {data.artist_shops.itunes &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_shops.itunes}><Itunes/></a></div>}
                          {data.artist_shops.vkontakte &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_shops.vkontakte}><Vkontakte/></a>
                          </div>}
                          {data.artist_shops.youtube &&
                          <div className={'mx-1 mt-1 socials'}><a href={data.artist_shops.youtube}><Youtube/></a></div>}
                        </div>
                      }
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row className="tab-info-items">
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4} className="align-self-center">
                      <span className="release-content-list-name">Поджанр</span>
                    </Col>
                    <Col md={8}>
                      <Select
                        className={`release-detail-select input-dark-bg tab-info-select`}
                        maxMenuHeight={250}
                        classNamePrefix="dark_select"
                        value={{...data.subgenre, value: data.subgenre.id, label: data.subgenre.name}}
                        isSearchable={false}
                        onChange={typeChange}
                        name='typesList'
                        isDisabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
                <Col lg={6}>
                  <Row className="tab-info-item">
                    <Col md={4}>
                      <span className="release-content-list-name">Доп. информация</span>
                    </Col>
                    <Col md={8}>
                      <Input
                        type="textarea"
                        value={data.artist_description || ''}
                        id="artist-description"
                        name="artist-description"
                        rows={1}
                        disabled={true}
                      />
                    </Col>
                  </Row>
                </Col>
              </Row>
              <div className="text-center mt-2">
                <h4 className="text-uppercase">Трек-Лист</h4>
                <hr/>
              </div>
              <TrackList data={data}/>
            </div>

            <PrivateProjectProvider owner={owner} verifyId={verifyId}>
              <div className="release-content-edit-block release-info-footer">
                <div className="release-content-edit-block-vn mt-1" onClick={() => generateCode(releaseId)}>
                  <span className="release-content-edit">
                    Сгенерировать код
                  </span>
                </div>
                <div className="release-content-edit-block-vn mt-1 ml-1" onClick={() => setModal(true)}>
                  <Trash className={'danger'} size={18}/>
                  <span className="release-content-edit">
                    Удалить
                  </span>
                </div>
                <div className="release-content-edit-block-vn ml-1 mt-1"
                     onClick={() => setFieldData(SET_RELEASE_INFO_VALUE, 'params', {...params, isEdited: true})}>
                  <Edit3 className={'primary'} size={18}/>
                  <span className="release-content-edit">
                    Редактировать
                  </span>
                </div>
              </div>
            </PrivateProjectProvider>
          </div>
      }
    </div>
  )
}

const mapStateToProps = state => ({
  reqParams: state.releaseInfo.reqParams,
  data: state.releaseInfo.release,
  params: state.releaseInfo.params,
  spinner: state.helper.spinner,
  types: state.releaseInfo.types,
  projects: state.projects.list,
  owner: state.releaseInfo.release.project.owner && state.releaseInfo.release.project.owner.id || null,
  verifyId: state.users.data.verify_id,
});
export default connect(mapStateToProps, {
  getDownloadLink,
  getReleaseById,
  generateCode,
  getTypes,
  setFieldData,
  deleteRelease
})(TabInfo)
